<template>
  <div class="introduction">
    {{$t('author.name')}}：
    <ul>
      <li>{{$t('introduction.item1')}}</li>
      <li>{{$t('introduction.item2')}}</li>
      <li>{{$t('introduction.item3')}}</li>
      <li>{{$t('introduction.item4.title')}}</li>
        <ul>
          <li>{{$t('introduction.item4.contents[0]')}}</li>
          <li>{{$t('introduction.item4.contents[1]')}}</li>
        </ul>
      <li>{{$t('introduction.item5')}}</li>
      <li>{{$t('introduction.item6')}}</li>
    </ul>

    <div class="mid-center">
      <div class="stack-wrapper">
        <stack ref="stack" :pages="someList" :stackinit="stackinit"></stack>
      </div>
      <div class="controls">
        <button @click="prev" class="button"><i class="prev"></i><span class="text-hidden">prev</span></button>
        <button @click="next" class="button"><i class="next"></i><span class="text-hidden">next</span></button>
      </div>
    </div>
  </div>
</template>
<script>
import { getImage } from '@/api/introduction'
import Stack from '@/components/tantan/stack'
export default {
  name: 'introduction',
  components: {
    Stack
  },
  data() {
    return {
      isDev: null,
      imgUrl: [],
      someList: [],
      stackinit: {
        visible: 3
      }
    }
  },
  methods: {
    prev () {
      this.$refs.stack.$emit('prev')
    },
    next () {
      this.$refs.stack.$emit('next')
    }
  },
  created() {
    this.isDev = process.env.NODE_ENV === 'development'
    getImage().then(resp => {
      let movieData
      movieData = [...resp[0].subjects, ...resp[1].subjects]
      movieData.forEach((v, i, _this) => {
        // v.images.large
        this.imgUrl.push({
          html: `<img src='${v.images.large}'>`
        })
      })
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.someList = this.imgUrl
    })
  }
}
</script>
<style scoped lang="stylus">
.introduction {
  padding-bottom: 300px;
  overflow: hidden;
}
.stack-wrapper {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 320px;
  height: 420px;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.controls{
  position: relative;
  width: 200px;
  text-align: center;
  display:flex;/*Flex布局*/
  display: -webkit-flex; /* Safari */
  justify-content:space-around;
  margin: 0 auto;
  margin-top: 50px
}
.controls .button {
  border: none;
  background: none;
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  width: 50px;
  height: 50px;
  z-index: 100;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-radius: 50%;
  background: #fff;
  outline: none;
}
.button .next{
  display: inline-block;
  width: 10px;
  height:5px;
  background: rgb(129,212,125);
  line-height: 0;
  font-size:0;
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
  left: -5px;
  top: 2px;
  position: relative;
}
.button .next:after{
  content:'/';
  display:block;
  width: 20px;
  height:5px;
  background: rgb(129,212,125);
  -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}
.button .prev{
  display: inline-block;
  width: 20px;
  height:5px;
  background: rgb(230,104,104);
  line-height: 0;
  font-size:0;
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
}
.button .prev:after{
  content:'/';
  display:block;
  width: 20px;
  height:5px;
  background: rgb(230,104,104);
  -webkit-transform: rotate(-90deg);
}
.controls .text-hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  color: transparent;
  display: block;
}
</style>